export default class TransfromScroll {
  /* eslint-disable */
  constructor(el, infiniteScroll) {
    this.$el = el;
    this.startY = 0; // 初始位置
    this.lastY = 0; // 上一次位置
    // 初始化缓动变量
    this.lastMoveTime = 0;
    this.lastMoveStart = 0;
    this.stopInertiaMove = false; // 是否停止缓动
    this.scroll = true;
    this.filterTanslateY = /^translateY\((.*)px\)$/;
    // 是否滚动到底部
    this.infiniteScroll = infiniteScroll || function () { };
    this.init();
  }
  init() {
    const dom = this.$el;
    document.addEventListener("touchstart", e => {
      e.stopPropagation();
    });
    dom.style.transition = "all 0s cubic-bezier(0.1, 0.57, 0.1, 1)";
    dom.addEventListener("touchstart", e => {
      // e.preventDefault();
      this.startY = e.changedTouches[0].pageY;
      this.lastY = this.startY;
      /**
       * 缓动代码
       */
      this.lastMoveStart = this.lastY;
      this.lastMoveTime = e.timeStamp || Date.now();
      this.stopInertiaMove = true;
    }, false);
    dom.addEventListener("touchmove", e => {
      e.preventDefault();
      const nowY = e.changedTouches[0].pageY;
      const moveY = (nowY - this.lastY) * .4;
      const y = dom.style.transform || 0;
      let translateY;
      if (y === 0) {
        translateY = y;
      } else {
        translateY = parseInt(dom.style.transform.replace(this.filterTanslateY, "$1"), 10);
      }
      this.scroll && (dom.style.transform = `translateY(${translateY + moveY}px)`);
      this.lastY = nowY;

      /**
       * 缓动代码
       */
      const nowTime = e.timeStamp || Date.now();
      this.stopInertiaMove = true;
      if (nowTime - this.lastMoveTime > 300) {
        this.lastMoveTime = nowTime;
        this.lastMoveStart = nowY;
      }
    }, false);
    dom.addEventListener("touchend", e => {
      // do touchend
      const nowY = e.changedTouches[0].pageY;
      const moveY = nowY - this.lastY;
      let translateY = parseInt(dom.style.transform.replace(this.filterTanslateY, "$1"), 10) + moveY;
      // 获取dom高度
      const domHeight = parseInt(this.getStyle(dom, "height").replace("px", ""), 10);
      // 获取父元素高度
      const parentHeight = parseInt(this.getStyle(document.getElementById("wrapper"), "height").replace("px", ""), 10);
      // 计算最大Y值
      let maxY;
      // 如果当前dom高度小于了父元素高度
      if (domHeight < parentHeight) {
        maxY = 0;
      } else {
        maxY = domHeight - parentHeight;
      }
      if (translateY < -maxY && translateY < 0) {
        translateY = -maxY;
        // 如果滚动到了底部则执行回调函数
        this.infiniteScroll();
      } else if (translateY > 0) {
        translateY = 0;
      }
      this.scroll && (dom.style.transform = `translateY(${translateY}px)`);
      // 记录最后位置
      this.lastY = nowY;

      /**
       * 缓动代码
       */
      /* eslint-disable */
      const nowTime = e.timeStamp || Date.now();
      const v = (nowY - this.lastMoveStart) / (nowTime - this.lastMoveTime); // 最后一段时间手指划动速度
      this.stopInertiaMove = false;
      ((v, startTime, contentY) => {
        const dir = v > 0 ? -1 : 1; // 加速度方向
        const deceleration = dir * 0.0006;
        const duration = v / deceleration; // 速度消减至0所需时间
        const dist = v * duration / 2; // 最终移动多少
        const inertiaMove = () => {
          if (this.stopInertiaMove) return;
          const nowTime = e.timeStamp || Date.now();
          const t = nowTime - startTime;
          const nowV = v + t * deceleration;
          // 速度方向变化表示速度达到0了
          if (dir * nowV < 0) {
            return;
          }
          const moveY = (v + nowV) / 2 * t;
          dom.style.transform = `translateY(${contentY + moveY}px)`;
          setTimeout(inertiaMove, 10);
        }
        // inertiaMove();
      })(v, nowTime, translateY);
    }, false);
    // let domChildren = dom.children;
    // for(let i=0; i< domChildren.length; i++){
    //   dom.addEventListener("touchstart", e => {
    //     e.stopPropagation();
    //   }, false);
    //   dom.addEventListener("touchmove", e => {
    //     e.stopPropagation();
    //   }, false);
    //   dom.addEventListener("touchend", e => {
    //     e.stopPropagation();
    //   }, false);
    // }
  }
  /**
   * 获取当前滚动位置
   */
  getTransformTranslateY() {
    return this.$el.style.transform.replace(this.filterTanslateY, "$1") || 0;
  }
  /**
   * 设置scroll属性
   * @param {Bool} newValue 设置时是否可以滑动
   */
  setScroll(newValue) {
    this.scroll = newValue;
  }
  /**
   * 获取Scroll属性
   */
  getScroll() {
    return this.scroll;
  }
  // 获取当前样式
  getStyle(element, attr) {
    if (window.getComputedStyle) {
      // 优先使用W3C规范
      return window.getComputedStyle(element)[attr];
    } else {
      // 针对IE9以下兼容
      return element.currentStyle[attr];
    }

  }
}



